<template>
  <div id="app">
    <van-nav-bar class="van-nav-bar" v-if="$route.meta.isShowNavBar">
      <template #title>
        <h1 class="title">{{ title }}</h1>
      </template>
      <template #left>
        <van-icon
          name="arrow-left"
          size="24"
          color="#fff"
          v-if="isLeftArrow"
          @click="onClickLeft"
        />
      </template>
      <template #right>
        <van-icon name="wap-nav" size="24" color="#fff" @click="dropDownMenu" />
      </template>
    </van-nav-bar>
    <div class="dropDownMenu" v-show="isMenuShow">
      <div class="menu-item">
        <a href="/">首页</a>
      </div>
      <div class="menu-item">
        <a href="/list">榜单</a>
      </div>
      <div class="menu-item">
        <a href="/hot">热点</a>
      </div>
      <div class="menu-item">
        <a href="/shopping">商场</a>
      </div>
    </div>
    <router-view></router-view>
    <van-tabbar
      v-model="active"
      active-color="#f03d37"
      class="van-tabbar"
      v-if="$route.meta.isShowTabbar"
    >
      <van-tabbar-item icon="home-o" to="/movie">电影/影院</van-tabbar-item>
      <van-tabbar-item icon="video" to="/video">视频</van-tabbar-item>
      <van-tabbar-item icon="live" to="/smallvideo">小视频</van-tabbar-item>
      <van-tabbar-item icon="cashier-o" to="/show">演出</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      active: 0,
      title: this.$route.meta.title,
      isMenuShow: false,
      isLeftArrow: false
    }
  },
  methods: {
    dropDownMenu() {
      this.isMenuShow = !this.isMenuShow
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.path'() {
      this.title = this.$route.meta.title
      this.isLeftArrow = this.$route.meta.isLeftArrow
    }
  }
}
</script>

<style lang="scss">
#app {
  .van-nav-bar {
    background-color: #e54847;
    height: 50px;
    .title {
      font-size: 18px;
      color: #fff;
      font-weight: 400;
    }
  }
  .van-tabbar {
    height: 48px;
    border-top: 0.5px solid #d8d8d8;
  }
  .dropDownMenu {
    position: absolute;
    top: 46px;
    right: 12px;
    width: 110px;
    height: 185px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 3px 9px 0 #d8d8d8;
    z-index: 20;
    .menu-item {
      width: 110px;
      height: 45px;
      border-top: 1px solid #f0f0f0;
      text-align: center;
      line-height: 45px;
      > a {
        color: #333;
        font-size: 15px;
      }
    }
  }
}
</style>
